<template>
	<div>
		<div style="text-align: left;font-size: 20px;margin-top: 10px;">
			<van-nav-bar
			  left-text="城市选择"
			  left-arrow
			  @click-left="onClickLeft"
			/>
			<van-divider />
		</div>
		
		 <div>
			<van-sticky>
				<van-search v-model="value" placeholder="输入城市名、拼音或字母查询" />
			</van-sticky>
		</div>
		
		<div>
			<van-index-bar id="city" class="indexBar" :sticky="false" highlight-color="#AE853A">
			      <van-index-anchor v-for="(item,index) in citys" :key="index" :index="item.initial">
			        <span class="indexWord">{{item.initial}}</span>
			        <van-cell
			          v-for="(citem,cindex) in item.list"
					  @click="chooseCity(citem),onClickLeft()"
			          :key="cindex"
			          :title="citem.name"
			        />
			      </van-index-anchor>
			    </van-index-bar>
		</div>
		
	</div>
</template>

<script>
import { ref } from 'vue';
import Citys from "../../../public/city.json"

export default {
	setup() {
		const onClickLeft = () => history.back();
	    return {
			
			onClickLeft,
			 };
	  },
	data(){
		return{
			value:"",
			citys:[],
		}
	},
	created(){
		this.citys = Citys.city
	},
	methods:{
		chooseCity(citem){
			console.log(citem.name);
			this.$store.commit("setCity",citem.name);
		},
		a(){
			console.log("111")
		}
	},
	watch:{
		'value':'a'
	}
}
</script>

<style>
	#city{
		text-align: left;
	}
</style>
